<template>
	<view>
		<view :style="{backgroundColor: canBeModified?'':'#F8F8F8'}" style="width: 100%; margin: 0 auto; display: flex; height: 70rpx;">
			<view style="line-height: 70rpx; width: 35%;  color: #808080;">{{title}}</view>
			<view style="width: 65%;">
				<input v-if="canBeModified" v-model="values" :password="password" style=" height: 70rpx; line-height: 70rpx; " />
				<view v-else style=" height: 70rpx; line-height: 70rpx; font-size: 35rpx;">
					{{values}}
				</view>
			</view>
		</view>
		<cross-line :style="{backgroundColor: canBeModified?'':'#F8F8F8'}" style="width: 100%;"></cross-line>
	</view>
</template>

<script>
	import crossLine from "./tg-cross-line.vue"
	export default {
		components:{
			crossLine
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			canBeModified:{
				type: Boolean,
				default: true
			},
			value: {
				type: String,
				default: ''
			},
			password:{
				type: Boolean,
				default: false
			}
		},
		computed: {
			// 计算属性的 getter
			values: {
				get: function () {
					// `this` 指向 vm 实例
					
					return this.value
				},
				set:function(newDate){
					console.log('12345678888')
					this.$emit("changeValue", {
						newDate
					})
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {

		}
	}
</script>

<style>
</style>
